<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>预警系统-实时日志</title>
<script type="text/javascript">
	var ws, res, filter, line = 0;
	function showMessage(text) {
		if (filter && filter.length > 0) {
			if (text.indexOf(filter) == -1) {
				//console.log(text);
				return;
			}
		}
		line++;
		if (line < 100) {
			res.value = res.value + '\n' + text;
		} else {
			line = 0;
			res.value = text;
		}
	}

	function start() {
		if (ws)
			return;
		res = document.getElementById('message');
		filter = document.getElementById('filter').value;
		//ws = new WebSocket('ws://' + location.hostname + ':9090/ws');
		ws = new WebSocket('ws://121.41.10.238:9090/ws');
		ws.onopen = function() {
			showMessage('Connected!');
		};
		ws.onclose = function() {
			showMessage('Lost connection');
		};
		ws.onmessage = function(msg) {
			showMessage(msg.data);
		};
	}

	function onChange() {
		filter = document.getElementById('filter').value;
		res.value = "";
		line = 0;
	}
	function stop() {
		if (ws) {
			ws.close();
			ws = null;
		}
	}
</script>
<body>
	过滤参数:
	<input id="filter" type="text" onchange="onChange()">
	<button onclick="start()" id="startBtn">Start</button>
	<button onclick="stop()" id="stopBtn">Stop</button>
	<hr />
	<textarea rows="50" cols="150" id="message"
		style="background: black; color: white;" disabled="disabled"></textarea>
</body>
</html>